<template>
  <!-- 作品BLOCK -->
  <div class="workitem">
    <a  class="workimgCon">
      <img class="workimg"  v-lazy="domain+'/Uploads/'+pinfo.m_path" @click="gotoUrl(domain+'/MinProgram2/Work/detail_o?work_id='+pinfo.works_id)">
      <div class="info">
        <span class="work_title midfont">{{pinfo.works_title}}</span>
        <price :is_on_sale="pinfo.is_on_sale" :works_price="pinfo.works_price" style="float: right;margin-top: .1rem"></price>
      </div>
    </a>

    <div style="margin-top:.1rem">
      <div class="tagsCon">
        <span class="work_cat">{{pinfo.cat_name}}</span>
        |<span class="work_material">{{pinfo.work_material}}</span>
        |<span class="work_decade">{{pinfo.works_decade}}</span>
        |<span class="work_lwh">{{pinfo.works_length}}cm*{{pinfo.works_width}}cm</span><span v-if="parseInt(pinfo.works_height)>0">*{{pinfo.works_height}}cm</span>

      </div>
      <div class="icons">
        <slot name="icons">

        </slot>
      </div>
    </div>

  </div>
</template>
<script type="text/javascript">

import price from "@/components/work/price"
export default {
  props:{
    pinfo:{
      type:Object,
      default:null,
    }
  },
  data(){
    return {
      is_show_comment:false,
      dinfo:this.pinfo
    }
  },
  methods:{
    change_dinfo(v){
      this.dinfo=v
    }
  },
  components:{
    price
  },
  mounted(){
    //console.log(this.$refs)
  }
}
</script>
<style type="text/css">
.workitem{
  position: relative;
  overflow: hidden;
}
.workimgCon{
  display: block;
  position: relative;
  height: auto;
  width: 100%;
  overflow: hidden;

}
.workimg{
  display: block;
  height: auto;
  width: 100%;
}
.info{width: 100%;font-size: .3rem;position: absolute;bottom:0;background:rgba(255,255,255,.5);color: #000;padding: .1rem;}
.tagsCon{max-width:10rem;float: left;}
.icons{white-space: nowrap;width:auto;overflow: hidden;}
.icons>div{float: right;}

</style>
